<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jstree basic demos</title>
	<style>
	</style>
	<link rel="stylesheet" href="./../../dist/themes/default/style.min.css" />
</head>
<body>

	<div id="evts" class="demo"></div>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="./../../dist/jstree.min.js"></script>
	
	<script>

	
	var cont = 0;

	$('#evts')
		.on("changed.jstree", function (e, data) {
			cont++;
			//alert(data);
			
			//ejemploForIn(data);
			
			if(data.selected.length && cont > 2) {
				
//				ejemploForIn(data.selected);
				
				alert( $(this).attr("id") + 'The selected node is: ' + data.instance.get_node(data.selected[0]).id);
			}
		})
		.jstree({
		'core' : {
			'data' : [
				{ "text" : "Root node", "state" : { "opened" : true }, "children" : [
						{ "text" : "Child node 1" },
						{ "text" : "Child node 2", "state" : { "opened" : true }, "children" : [
						{ "text" : "Child node 1", "id" : "99" },
						{ "text" : "Child node 2", "id" : "100", "children" : [
						
						{ "text" : "Child node 1", "id" : "999", "state" : { "disabled" : true } },
						{ "text" : "Child node 2", "id" : "1000", "state" : { "selected" : true }, "icon" : "jstree-file" },
						{ "text" : "Child node 1", "id" : "11", "state" : { "disabled" : true } },
						{ "text" : "Child node 1", "id" : "12", "state" : { "disabled" : true } },
						{ "text" : "Child node 1", "id" : "13", "state" : { "disabled" : true } },
				] }
				] }
				]}
			]
		}
	});
	</script>
  
</body>
</html>